<template>

    <el-row :gutter="10" style="margin-bottom: 40px" class="Main_two">
      <el-col :span="12" :xs="24">
        <el-card> <line-charts></line-charts></el-card>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-card> <china-map style="height: 500px"></china-map></el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="Main_three">
      <el-col :span="15" :xs="24">
        <el-card><pie-charts></pie-charts></el-card>
      </el-col>
      <el-col :span="9" :xs="24">
        <el-card> <bar-charts></bar-charts> </el-card>
      </el-col>
    </el-row>
  </template>
  
  <script>
  // Echarts图表
  
  import ChinaMap from '@/components/Map/ChinaMap.vue'
  import BarCharts from '@/components/Chart/BarCharts.vue'
  import PieCharts from '@/components/Chart/PieCharts.vue'
  import LineCharts from '@/components/Chart/LineCharts.vue'
  
  export default {
    emits: ['refreshUser'],
    name: 'ChinaDataCharts',
    data() {
      return {
        confirm: 0,
        input: 0,
        heal: 0,
        dead: 0,
        updateTime: this.timeformat(new Date())
      }
    },
    //页面元素渲染之后再触发
  
    components: {
      ChinaMap,
      BarCharts,
      PieCharts,
      LineCharts
    },
    created() {
      this.load()
    },
    methods: {
      timeformat(time) {
        return this.$moment(time).format('yyyy-MM-DD HH:ss')
      },
      load() {
        this.$http.get('/china_total').then((res) => {
          console.log('首页')
          console.log(res)
          this.confirm = res.data.confirm
          this.input = res.data.input
          this.heal = res.data.heal
          this.dead = res.data.dead
          this.updateTime = this.timeformat(res.data.updateTime)
        })
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  #pie {
    height: 500px;
  }
  span {
    font-size: 16px;
    font-weight: 800;
    text-shadow: 5px 5px 5px rgba(205, 205, 205, 0.753);
  }
  .Main_one {
    .el-col {
      .el-card {
        font-weight: 800;
        p {
          font-weight: 800;
          font-size: 14px;
        }
        div {
          padding: 10px 0;
          text-align: center;
          font-size: 14px;
        }
      }
    }
  }
  
  @media only screen and (max-width: 768px) {
    .Main_one {
      margin-bottom: 10px !important;
      .el-col:nth-child(-n + 2) {
        margin-bottom: 20px;
      }
    }
  }
  
  @media only screen and (max-width: 992px) {
    .Main_one {
      .el-col:nth-child(-n + 3) {
        margin-bottom: 20px;
      }
    }
    .Main_two {
      .el-col:nth-child(1) {
        margin-bottom: 10px;
      }
    }
    .Main_three {
      .el-col:nth-child(1) {
        margin-bottom: 10px;
      }
    }
  }
  </style>